<template>
  <div class="user-container max-w-8xl mx-auto px-4 pt-6 pb-16 sm:px-6 lg:px-4">
    <h1 class="text-28 font-semibold text-gray-1000">
      {{$t('user_dashbroad')}}
    </h1>
    <div class="box-shadow flex items-center px-5 py-5 gap-x-10 gap-y-3 rounded mt-5 flex-wrap">
      <div>
        <div class="text-sm text-gray-1400">{{$t('user_account')}}</div>
        <div class="flex items-center mt-3 flex-wrap gap-3">
          <span class="text-xl text-gray-1000 leading-6 font-semibold">{{userinfo.account}}</span>
          <span class=" inline-block px-3 py-1 bg-purple-1300 text-sm text-white rounded ml-3"
            v-if="hasRealVal(advertiser)">
            {{$t('user_advertiser')}}
          </span>
        </div>
      </div>
      <div class="w-px h-8 bg-gray-2000"></div>
      <div>
        <div class="text-sm text-gray-1400">{{$t('user_AIs')}}</div>
        <div class="text-xl text-gray-1000 leading-6 font-semibold mt-3">{{hasRealVal(aisTotal) ? aisTotal : '--'}}</div>
      </div>
      <div class="w-px h-8 bg-gray-2000"></div>
      <div>
        <div class="text-sm text-gray-1400">{{$t('user_totalBalances')}}</div>
        <div class="text-xl text-gray-1000 leading-6 font-semibold mt-3">{{ hasRealVal(advertiser) ? $t('user_moneyNum',{num: advertiser.remaining_quota, money: advertiser.balance}) : '--'}}</div>
      </div>
    </div>

    <user-my-ais @updateAiTotal="updateAiTotal"></user-my-ais>

    <div class="tabs-box box-shadow px-5 py-5 rounded mt-4">
      <div class="fs-0">&nbsp;</div>
      <el-tabs v-model="activeName"
        @tab-click="handleClick">
        <el-tab-pane :label="$t('user_payment')"
          name="payment">
          <user-payment></user-payment>
        </el-tab-pane>
        <el-tab-pane :label="$t('user_submitAi')"
          name="submitAI">
          <user-submit-ai></user-submit-ai>
        </el-tab-pane>
        <el-tab-pane :label="$t('user_advertisement')"
          name="advertise">
          <user-advertisement></user-advertisement>
        </el-tab-pane>
        <el-tab-pane :label="$t('user_updateAi')"
          name="updateAi">
          <user-update-ai></user-update-ai>
        </el-tab-pane>
        <el-tab-pane :label="$t('user_submitGpt')"
          name="submitGpt">
          <user-submit-gpt></user-submit-gpt>
        </el-tab-pane>
      </el-tabs>
    </div>

    <Invoice v-if="activeName === 'payment'"></Invoice>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'User',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      meta: [
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  computed: {
    ...mapState({
      userinfo: (state) => state.userinfo,
      locale: (state) => state.locale,
      toolify_isLogin: (state) => state.toolify_isLogin,
      advertiser: (state) => state.advertiser,
    }),
  },
  watch: {
    '$route.query': {
      handler(val) {
        if (this.hasRealVal(this.$route.query.tab)) {
          this.activeName = this.$route.query.tab
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    if (this.hasRealVal(this.$route.query.tab)) {
      this.activeName = this.$route.query.tab
    }
  },
  data() {
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
      loading: true,

      activeName: 'payment',

      aisTotal: null,

      isFirstLoad: true,
    }
  },
  methods: {
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },
    handleClick() {
      this.$router.replace({
        query: { tab: this.activeName },
      })
    },
    updateAiTotal(total) {
      this.aisTotal = total
      if (this.isFirstLoad && this.hasRealVal(this.$route.query.tab)) {
        this.$nextTick(() => {
          const dom = document.querySelector('.tabs-box')
          if (dom) {
            const top = dom.offsetTop

            const targetScrollPosition = Math.max(top - 100, 0)

            let timer = setTimeout(() => {
              window.scrollTo({
                top: targetScrollPosition,
                behavior: 'auto',
              })

              this.$nextTick(() => {
                clearTimeout(timer)
              })
            })
          }
        })
        this.isFirstLoad = false
      }
    },
  },
}
</script>
<style lang='scss' scoped>
.user-container {
  .box-shadow {
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.06);
  }

  .pagination {
    text-align: right;
    margin-top: 20px;
    ::v-deep .el-pagination {
      padding: 0;
      .el-pagination__jump {
        .el-input {
          margin-right: 0;
        }
      }
    }
  }

  .tabs-box {
    ::v-deep .el-tabs {
      .el-tabs__header {
        margin-bottom: 20px;

        .el-tabs__item {
          padding: 0 13px;
          font-size: 18px;
          color: #191919;
          &:nth-child(2) {
            padding-left: 0;
          }
          &:last-child {
            padding-right: 0;
          }
          &.is-active {
            color: #7150e6;
          }
          &:hover {
            color: #7150e6;
            cursor: pointer;
          }
        }
        .el-tabs__nav-wrap {
          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: rgba(0, 0, 0, 0);
            z-index: 1;
          }
        }
      }
    }
  }
}
</style>
